﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>权限管理</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .container {
            display: flex;
            padding: 15px;
        }
        .tree-container {
            width: 300px;
            padding: 10px;
            border-right: 1px solid #e6e6e6;
        }
        .form-container {
            flex: 1;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tree-container">
            <div id="ID-tree-demo-showLine"></div>
        </div>
        <div class="form-container">
            <form class="layui-form" action="javascript:void(0);">
                @Html.AntiForgeryToken()
                <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="PermissionName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限路径</label>
                    <div class="layui-input-block">
                        <input type="text" name="PermissionPath" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父级Id</label>
                    <div class="layui-input-block">
                        <input type="text" name="ParentId" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="PermissionIcoon" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="Status" value="true" title="启用" checked>
                        <input type="radio" name="Status" value="false" title="禁用">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="PermissionIndex" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" onclick="permissionadd()">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form', 'tree'], function(){
            var form = layui.form;
            var tree = layui.tree;
            
            // 初始化表单
            form.render();

            // 获取树形数据并渲染
            function loadAndRenderTree() {
                $.ajax({
                    url: '/Permission/GetTreePermission',
                    type: 'get',
                    data: { ParentId: 0 },
                    success: function(result) {
                        var treeData = formatTreeData(result);
                        tree.render({
                            elem: '#ID-tree-demo-showLine',
                            data: treeData,
                            showLine: true,
                            click: function(obj){
                                // 获取点击的节点数据
                                var data = obj.data;
                                // 调用接口获取详细信息
                                $.ajax({
                                    url: '/Permission/fantianpermission',
                                    type: 'get',
                                    data: { id: data.id },
                                    success: function(result) {
                                        // 回显表单数据
                                        $("input[name='PermissionName']").val(result.permissionName);
                                        $("input[name='PermissionPath']").val(result.permissionPath);
                                        $("input[name='ParentId']").val(result.parentId);
                                        $("input[name='PermissionIcoon']").val(result.permissionIcoon);
                                        $("input[name='PermissionIndex']").val(result.permissionIndex);
                                        // 设置单选框状态
                                        $("input[name='Status'][value='" + result.status.toString() + "']").prop("checked", true);
                                        // 重新渲染表单，特别是单选框
                                        form.render();
                                    },
                                    error: function() {
                                        alert('获取权限信息失败');
                                    }
                                });
                            }
                        });
                    }
                });
            }

            // 初始加载树形数据
            loadAndRenderTree();
        });

        // 格式化树形数据
        function formatTreeData(data) {
            return data.map(function(item) {
                return {
                    title: item.permissionName,
                    id: item.id,
                    spread: true,
                    children: item.children ? formatTreeData(item.children) : null
                };
            });
        }

        // 清空表单数据
        function resetForm() {
            $('form')[0].reset();
            layui.form.render();
        }

        function permissionadd(){
            var m = {};
            m.PermissionName = $("input[name='PermissionName']").val();
            m.PermissionPath = $("input[name='PermissionPath']").val();
            m.ParentId = parseInt($("input[name='ParentId']").val()) || 0;
            m.PermissionIcoon = $("input[name='PermissionIcoon']").val();
            m.Status = $("input[name='Status']:checked").val() === "true";
            m.PermissionIndex = parseInt($("input[name='PermissionIndex']").val()) || 0;
            m.__RequestVerificationToken = $('input[name="__RequestVerificationToken"]').val();

            $.ajax({
                url: "/Permission/AddPermission",
                data: m,
                type: "post",
                dataType: "text",
                success: function(a){
                    if(a > 0){
                        alert('添加成功');
                        // 重新加载树形数据
                        $.ajax({
                            url: '/Permission/GetTreePermission',
                            type: 'get',
                            data: { ParentId: 0 },
                            success: function(result) {
                                var treeData = formatTreeData(result);
                                // 重新渲染树
                                layui.tree.render({
                                    elem: '#ID-tree-demo-showLine',
                                    data: treeData,
                                    showLine: true
                                });
                                // 清空表单
                                resetForm();
                            }
                        });
                    } else {
                        alert('添加失败');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    alert('服务器错误，请稍后重试');
                }
            });
        }
    </script>
</body>
</html>
